<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
	xmlns:p="http://primefaces.org/ui"
>
	<ui:define name="description">
		<p>
			Collection of utility methods for working with <code>PartialViewContext</code>. There are also shortcuts to the current
			<h:link value="OmniPartialViewContext" outcome="/contexts/OmniPartialViewContext" styleClass="code" />
			instance.
		</p>
		<p>
			This utility class allows an easy way of programmaticaly (from inside a managed bean method) specifying new
			client IDs which should be ajax-updated, also <code>UIData</code> rows or columns on specific index, 
			specifying callback scripts which should be executed on complete of the ajax response and adding arguments 
			to the JavaScript scope. The added arguments are during the "on complete" phase as a JSON object available 
			by <code>OmniFaces.Ajax.data</code>.
		</p>
		<p>
			The JSON object is been encoded by <code>Json#encode()</code> which supports standard Java types 
			<code>Boolean</code>, <code>Number</code>, <code>CharSequence</code> and <code>Date</code> and also arrays, 
			<code>Collection</code>s and <code>Map</code>s of them and as last resort it will use the introspector to 
			examine it as a Javabean and encode it like a <code>Map</code>.
		</p>
		<p>
			Note that <code>Ajax#updateRow()</code> and <code>Ajax#updateColumn()</code> can only update cell content
			when it has been wrapped in some container component with a fixed ID.
		</p>
		<ui:include src="/WEB-INF/includes/utils/feature-request.xhtml" />
	</ui:define>
	
	<ui:define name="demo">
		<h3>Update a component programmatically</h3>
		<h:form id="form">
			<h:commandButton value="submit" action="#{ajaxBean.update}">
				<f:ajax />
			</h:commandButton>
			<p>It's now <h:outputText id="timestamp" value="#{now.toString()}" /></p>
		</h:form>

		<hr />
		
		<h3>Update specific UIData rows and columns programmatically (standard JSF example)</h3>
		<h:form>
			<h:dataTable binding="#{table1}" value="#{of:createArray(3)}" width="100%">
				<h:column><f:facet name="header">col1</f:facet><h:panelGroup id="col1">#{now}</h:panelGroup></h:column>
				<h:column><f:facet name="header">col2</f:facet><h:panelGroup id="col2">#{now}</h:panelGroup></h:column>
				<h:column><f:facet name="header">col3</f:facet><h:panelGroup id="col3">#{now}</h:panelGroup></h:column>
			</h:dataTable>

			<p>
				<f:ajax>
					<h:commandButton value="update row1" action="#{ajaxBean.updateRow(table1, 0)}" />
					<h:commandButton value="update row2" action="#{ajaxBean.updateRow(table1, 1)}" />
					<h:commandButton value="update row3" action="#{ajaxBean.updateRow(table1, 2)}" />
					<h:commandButton value="update col1" action="#{ajaxBean.updateColumn(table1, 0)}" />
					<h:commandButton value="update col2" action="#{ajaxBean.updateColumn(table1, 1)}" />
					<h:commandButton value="update col3" action="#{ajaxBean.updateColumn(table1, 2)}" />
				</f:ajax>
			</p>
		</h:form>

		<hr />

		<h3>Update specific UIData rows and columns programmatically (PrimeFaces example)</h3>
		<h:form>
			<p:dataTable binding="#{table2}" value="#{of:createArray(3)}">
				<p:column headerText="col1"><h:panelGroup id="col1">#{now}</h:panelGroup></p:column>
				<p:column headerText="col2"><h:panelGroup id="col2">#{now}</h:panelGroup></p:column>
				<p:column headerText="col3"><h:panelGroup id="col3">#{now}</h:panelGroup></p:column>
			</p:dataTable>

			<p>
				<p:commandButton value="update row1" action="#{ajaxBean.updateRow(table2, 0)}" />
				<p:commandButton value="update row2" action="#{ajaxBean.updateRow(table2, 1)}" />
				<p:commandButton value="update row3" action="#{ajaxBean.updateRow(table2, 2)}" />
				<p:commandButton value="update col1" action="#{ajaxBean.updateColumn(table2, 0)}" />
				<p:commandButton value="update col2" action="#{ajaxBean.updateColumn(table2, 1)}" />
				<p:commandButton value="update col3" action="#{ajaxBean.updateColumn(table2, 2)}" />
			</p>
		</h:form>

		<hr />
		
		<h3>Execute a callback script programmatically</h3>
		<h:form>
			<h:commandButton value="submit" action="#{ajaxBean.callback}">
				<f:ajax />
			</h:commandButton>
		</h:form>

		<hr />
		
		<h3>Add arguments to the JavaScript scope</h3>
		<h:form>
			<h:commandButton value="submit" action="#{ajaxBean.argument}" onclick="$('#showData').empty()">
				<f:ajax />
			</h:commandButton>
		</h:form>
		<ul id="showData"></ul>
		<h:outputScript>
			function showData() {
				var data = OmniFaces.Ajax.data;
				var $showData = $("#showData");
				
				$.each(data, function(key, value) {
					$("&lt;li&gt;").text(key + "=" + JSON.stringify(value)).appendTo($showData);
				});
			}
		</h:outputScript>
	</ui:define>
</ui:composition>